<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>布局切换</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script
      src="./js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- TODO：请在下面实现需求 -->
      <div class="bar">
        <a class="grid-icon active"></a>
        <a class="list-icon"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid">
        <li>
          <a href="#/3814" target="_blank"> <img src="./images/1.png" /></a>
        </li>
      </ul>
      <ul class="list">
        <li>
          <a href="#/3814" target="_blank"> <img src="./images/1.png" /></a>
          <p>从零吃透 Vue.js 框架</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      active:true
    },
    mounted() {
      // TODO：补全代码实现需求
      this.getData();
    },
    methods: {
      async getData(){
        var List = await axios.get("./goodsList.json")
        this.goodsList = List.data
        console.log(this.goodsList);
      },
      altergrid(e){
        this.flag = true;
      }
    },
  });
</script>
